<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      width="650px"
      v-on="$listeners"
      @open="onOpen"
      @close="onClose"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-position="top">
        <el-form-item label="企业名称" prop="companyName">
          <el-input
            v-model="form.companyName"
            placeholder="请输入企业名称"
            :disabled="data.checkStatus == 1"
          />
        </el-form-item>
        <el-form-item label="统⼀社会信⽤代码" prop="creditCode">
          <el-input
            v-model="form.creditCode"
            placeholder="请输入统⼀社会信⽤代码"
            :disabled="data.checkStatus == 1"
          />
        </el-form-item>
        <el-form-item label="所在城市" prop="city">
          <district-select
            style="width: 100%"
            :city-label.sync="form.cityLabel"
            :value.sync="form.city"
            collapse-tags
            :show-all-levels="true"
          ></district-select>
        </el-form-item>
        <el-form-item label="归属运营商" prop="operateId">
          <el-select
            v-model="form.operateId"
            style="width: 100%"
            placeholder="请选择归属运营商"
            filterable
            :disabled="isOperate"
          >
            <el-option
              v-for="item in operateList"
              :label="item.deptName"
              :value="item.deptId"
              :key="item.deptId"
            ></el-option>
          </el-select>
        </el-form-item>
        <div style="display: flex">
          <el-form-item
            label="获客来源"
            prop="sourceType"
            style="flex-shrink: 0; width: 100px"
          ></el-form-item>
          <el-radio-group v-model="form.sourceType" style="margin-top: 10px">
            <el-radio
              v-for="dict in dict.type.jazx_source_type"
              :key="dict.value"
              :label="dict.value"
              >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </div>
        <el-form-item label="归属渠道商" prop="channelId" v-if="form.sourceType == 1">
          <el-select
            v-model="form.channelId"
            style="width: 100%"
            placeholder="请选择归属渠道商"
            filterable
          >
            <el-option
              v-for="item in channelList"
              :label="item.deptName"
              :value="item.deptId"
              :key="item.deptId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="leader">
          <el-input v-model="form.leader" placeholder="请输入负责人" />
        </el-form-item>
        <el-form-item label="联系方式" prop="leaderPhone">
          <el-input-number
            v-model="form.leaderPhone"
            placeholder="请输入联系方式"
            :controls="false"
            style="width: 100%; text-align: left"
          ></el-input-number>
        </el-form-item>
        <el-form-item style="width: 100%" v-if="!isEdit">
          <template #label>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
              "
            >
              <div style="display: flex; gap: 4px">
                <em style="color: #ff4949">*</em>
                <div>超级管理员账号</div>
              </div>
              <el-button size="mini" @click="syncLeader">同步负责人信息</el-button>
            </div>
          </template>
          <div style="line-height: 50px">
            <el-input v-model="form.superAdminName" placeholder="请输入超级管理员账号" />
            <el-input v-model="form.superAdminPhone" placeholder="请输入超级管理员联系方式" />
            <el-input v-model="form.superAdminIdCard" placeholder="请输入超级管理员身份证号码" />
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="cancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm">确定保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getOperateAndChannel } from '@/api/operate/channel';

export default {
  dicts: ['jazx_source_type'],
  inheritAttrs: false,
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    isEdit() {
      return Boolean(this.data.id);
    },
    isOperate() {
      return (
        this.$store.getters.roles.includes('yys_super_admin') ||
        this.$store.getters.roles.includes('yys_admin') ||
        this.$store.getters.roles.includes('yys_js') ||
        this.$store.getters.roles.includes('yys_yyry')
      );
    },
    operateList() {
      return this.deptList.operateList;
    },
    channelList() {
      return this.deptList.channelList;
    },
  },
  watch: {
    data: {
      immediate: true,
      deep: true,
      handler() {
        this.form = { ...this.form, ...this.data };
        this.form.operateId = this.isOperate ? this.$store.getters.operateId : this.form.operateId;
      },
    },
  },
  data() {
    return {
      form: {
        companyName: null,
        creditCode: null,
        city: null,
        cityLabel: null,
        operateId: null,
        sourceType: null,
        channelId: null,
        leader: null,
        leaderPhone: undefined,
        superAdminName: null,
        superAdminPhone: null,
        superAdminIdCard: null,
      },
      rules: {
        companyName: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
        creditCode: [
          { required: true, message: '统⼀社会信⽤代码不能为空', trigger: 'blur' },
          {
            pattern: /^([0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}|[1-9]\d{14})$/,
            message: '统⼀社会信⽤代码格式错误',
            trigger: 'blur',
          },
        ],
        city: [{ required: true, message: '所在城市不能为空', trigger: 'blur' }],
        operateId: [{ required: true, message: '归属运营商不能为空', trigger: 'blur' }],
        sourceType: [{ required: true, message: '获客来源不能为空', trigger: 'blur' }],
        channelId: [{ required: true, message: '归属渠道商不能为空', trigger: 'blur' }],
        leader: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
        leaderPhone: [
          { required: true, message: '联系方式不能为空', trigger: 'blur' },
          { pattern: /^\d{11}$/, message: '联系方式格式错误', trigger: 'blur' },
        ],
      },
      // 归属部门列表
      deptList: [],
    };
  },
  methods: {
    // 归属部门列表查询
    handleDeptQuery() {
      // getOperateAndChannel().then((res) => {
      //   console.log(res);
      //   this.deptList = res.data;
      // });
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let _form = { ...this.form };
          if (!this.isEdit) {
            let _IDRe18 =
              /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if (!_form.superAdminName) {
              this.$message.error('请填写超级管理员账号');
              return;
            } else if (!_form.superAdminPhone) {
              this.$message.error('请填写超级管理员联系方式');
              return;
            } else if (_form.superAdminPhone.toString().length !== 11) {
              this.$message.error('超级管理员联系方式格式错误');
              return;
            } else if (isNaN(_form.superAdminPhone)) {
              this.$message.error('超级管理员联系方式必须为数字');
              return;
            } else if (!_form.superAdminIdCard) {
              this.$message.error('请填写超级管理员身份证号码');
              return;
            } else if (!_IDRe18.test(_form.superAdminIdCard)) {
              this.$message.error('超级管理员身份证号码格式错误');
              return;
            }
          }
          this.$emit('submit', _form, this.cancel);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    syncLeader() {
      this.form.superAdminName = this.form.leader;
      this.form.superAdminPhone = this.form.leaderPhone;
    },
    onOpen() {
      this.handleDeptQuery();
    },
    onClose() {
      this.cancel();
    },
    cancel() {
      this.$refs.form.resetFields();
      this.close();
    },
    close(e) {
      this.form.superAdminPhone = null;
      this.form.superAdminName = null;
      this.form.superAdminIdCard = null;
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
::v-deep .el-form-item--medium .el-form-item__label {
  width: 100%;
}
</style>
